<template>
  <div class="wrapper">
    <div class="content">
      <div class="d-flex justify-center flex-column text-center gap-col-8">
        <div class="font-size-20 font-weight-500 line-height-140">{{ $t('premium.title') }}</div>
        <div class="font-size-14 font-weight-500 line-height-140">
          {{ $t('premium.subtitle') }}
        </div>
        <div>
          <SwitchTabs
            v-model="premiumType"
            :left-value="PREMIUM_MEMBER.SEASON"
            :right-value="PREMIUM_MEMBER.MONTH"
            :left-label="$t('premium.perSeason')"
            :right-label="$t('premium.perMonth')"
            :left-sub-label="$t('premium.cp')"
            class="mb-4"
          />
          <div v-show="premiumType === PREMIUM_MEMBER.SEASON">
            <PremiumCard
              :title="$t('common.premium')"
              :price="memberSeason?.price"
              :price-label="$t('premium.threeMonths')"
              :bill-label="$t('premium.seasonBill')"
              :save-label="$t('premium.savePercentage')"
              :button-label="$t('premium.card.btn')"
              :on-buy="() => toBuy(PREMIUM_MEMBER.SEASON)"
            />
            <PremiumInfo />
            <div class="w-100 d-flex justify-center">
              <button
                @click="toBuy(PREMIUM_MEMBER.SEASON)"
                :class="{ 'pc-btn': !isMobile, 'w-100': isMobile }"
                class="atc-btn primary-btn font-size-14 font-weight-500 line-height-140 primary-gradient pointer"
              >
                {{ $t('premium.upgradeNow') }}
              </button>
            </div>
            <PremiumAccordion />
          </div>
          <div v-show="premiumType === PREMIUM_MEMBER.MONTH">
            <PremiumCard
              :title="$t('common.premium')"
              :price="memberMonth?.price"
              :price-label="$t('premium.month')"
              :bill-label="$t('premium.monthBill')"
              :button-label="$t('premium.card.btn')"
              :on-buy="() => toBuy(PREMIUM_MEMBER.MONTH)"
            />
            <PremiumInfo />
            <div class="w-100 d-flex justify-center mb-6">
              <button
                @click="toBuy(PREMIUM_MEMBER.MONTH)"
                :class="{ 'pc-btn': !isMobile, 'w-100': isMobile }"
                class="atc-btn primary-btn font-size-14 font-weight-500 line-height-140 primary-gradient pointer"
              >
                {{ $t('premium.upgradeNow') }}
              </button>
            </div>
            <PremiumAccordion />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useAppStore } from '@/store/app'
import { usePremiumCelebrationStore } from '@/store/premium/animation'
import { $t } from '@/i18n'
import PremiumAccordion from '@/components/mine/PremiumAccordion.vue'
import PremiumCard from '@/components/mine/PremiumCard.vue'
import PremiumInfo from '@/components/mine/PremiumInfo.vue'
import SwitchTabs from '@/components/tabs/SwitchTabs.vue'
import { useDialog } from '@/compositions/viewer/dialog'
import { PREMIUM_MEMBER } from '@/constant'

const premiumType = ref(PREMIUM_MEMBER.SEASON)

const appStore = useAppStore()
const { appConfig, isMobile } = storeToRefs(appStore)
const memberMonth = appConfig.value.config.member_type_list.find((item) => item.id === PREMIUM_MEMBER.MONTH)
const memberSeason = appConfig.value.config.member_type_list.find((item) => item.id === PREMIUM_MEMBER.SEASON)
console.log('config.member_type_list', appConfig.value.config.member_type_list)

const { premium } = useDialog()
const { open } = usePremiumCelebrationStore()
const { isVip } = storeToRefs(useAccountStore())

function toBuy(key) {
  premium({ premiumType: key })
  if (isVip.value) open()
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  border-radius: 0.625rem;
  background: rgb(var(--v-theme-surface));
  padding: 0.5rem 0.5rem 0.5rem 0;

  .content {
    overflow-y: scroll;
    padding-right: 0.25rem;
    height: 100%;

    &::-webkit-scrollbar {
      width: 0.25rem;
      display: block;
    }
    &::-webkit-scrollbar-thumb {
      background: var(--color-primary-divider, rgba(215, 215, 215, 0.4));
      border-radius: 0.09375rem;
      border: 0.35rem solid transparent;
    }
  }
}

.desktop {
  .wrapper {
    height: 90%;
    .content {
      height: 100%;
      padding: 1.75rem 1.5rem 1.75rem 1.5rem;
      .atc-btn {
        width: 29.4375rem;
      }
    }
  }
}
.mobile {
  .wrapper {
    height: 100%;

    .content {
      padding-top: 2.375rem;
      height: 100%;
      width: 100%;
      position: relative;
      padding: 2.5rem 0.75rem 0.75rem 1.25rem;

      // 手機版上方的線
      &::after {
        content: '';
        position: absolute;
        top: 0.25rem;
        left: 50%;
        background: #c9c9c9;
        width: 3.4375rem;
        height: 0.1875rem;
        border-radius: 1.25rem;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
